<template>
  <div class="container-fluid">
    <div class="q-banner">
      <div class="container">
        <ul class="detail-title">
          <li>
            课程
            <p>{{teacherinfo.class_number}}</p>
            <i class="line"></i>
          </li>
          <li>
            评价
            <p>{{teacherinfo.evaluate}}</p>
          </li>
          <li>
            &nbsp;
          </li>
          <li>
            学员
            <p>{{teacherinfo.student_num}}</p>
            <i class="line"></i>
          </li>
          <li>
            评分
            <p>{{teacherinfo.grade}}</p>
          </li>
        </ul>
      </div>
    </div>  
    <div class="techerinfo">
      <ul>
        <li>
          <img :src="teacher.head_icon" alt="">
        </li>
        <li class="title">
          {{teacher.real_name}}
        </li>
        <li><el-rate v-model="teacher.star_num" disabled text-color="#ff9900" score-template="{teacher.star_num}"></el-rate></li>
        <li class="jianjie">
          {{teacher.describe}}
        </li>
      </ul>
    </div>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="margintop40">
            <h2 class="teacher">开设课程</h2>
          </div>
        </el-col>
      </el-row>
      <!-- 课程列表 -->
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in course" :key="index" class="courseList">
          <div>
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.cover" class="image" />
              <div style="padding: 14px;">
                <p>{{item.title}}</p>
                <!-- <ul class="kecheng-state-wrap">
                  <li class="kecheng-state bg-green">直播</li>
                  <li class="kecheng-state bg-blue">录播</li>
                  <li></li>
                  <li class="kecheng-state bg-yellow">其他</li>
                </ul> -->
                <div class="bottom clearfix">
                  <p class="kecheng-person">
                    <i class="el-icon-user-solid"></i>{{item.buy_num}}
                  </p>
                  <p class="kecheng-price">
                    <!-- <s>¥2980</s> -->
                    <span>¥{{item.pricing}}</span>
                  </p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!-- 学员评价 -->
      <!-- <el-row :gutter="20">
        <el-col :span="3">
          <div class="margintop40">
            <h2 class="teacher">学员评价</h2>
          </div>
        </el-col>
      </el-row>
      <div class="student-evaluate">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(i,index) in 6" :key="index" class="marginbottom20">
              <el-card shadow="always" class="clearfix">
                <el-avatar :size="52" :src="imgUrl2"></el-avatar>
                <p class="student-text">老师非常棒老师非常棒,老师非常棒老师非常棒,老师非常棒老师非常棒,老师非常棒老师非常棒...</p>
              </el-card>
          </el-col>
        </el-row>
      </div> -->
    </div>
  </div>
</template>

<style scoped lang='less'>
.q-banner {
  position: relative;
  height: 46vh;
  text-align: center;
  margin: 0 auto;
  background: url(../../assets/image/teacher/detailbg.png) center/cover no-repeat;
  .detail-title{
    position: absolute;
    display: inline-table;
    color: #fff;
    left: 50%;
    bottom:10px;
    transform: translateX(-50%);  
    li{
      position: relative;
      float: left;
      width: 112px;   
      height: 40px;
      .header{
        width: 100%;
        border-radius: 100%;
      }
    }
    .line{
      position: absolute;
      right: 0;
      bottom: 6px;
      width: 1px;
      height: 20px;
      background: #ccc;

    }    
  }
}
.techerinfo{
  text-align: center;
  line-height: 30px;
  .title{
    font-size: 18px;
    color:#000033;
  }
  img{
    position: relative;
    width: 112px;
    margin-top: -56px;
    border-radius: 100%;
    z-index: 99;
  }
  .jianjie{
    width:40%;
    color: #4D555D;
    margin: auto;
  }
}
.margintop40 {margin-top: 40px;}
.marginbottom20{margin-bottom: 12px;}
.teacher {
  line-height: 40px;
  text-align: center;
  background: url("../../assets/image/teacher/topbg.png") 100% 100% no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  color: #000033;
  margin-bottom: 20px;
}
.kecheng-state-wrap {
  display: inline-table;
  width: 100%;
  margin-top: 4px;
  .kecheng-state {
    float: left;
    font-size: 12px;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 8px;
  }
  .bg-green {
    background: #16c4bc;
  }
  .bg-blue {
    background: #45a0ff;
  }
  .bg-yellow {
    background: #ffaa45;
  }
}

.kecheng-person {
  float: left;
  font-size: 12px;
  color: #999;
  i {
    margin-right: 4px;
  }
}

.bottom {
  margin-top: 13px;
  line-height: 18px;
}

.kecheng-price {
  padding: 0;
  float: right;
  s {
    font-size: 12px;
    margin-right: 6px;
  }
  span {
    font-size: 16px;
    color: #fe6f21;
  }
}
.image {
  width: 100%;
  max-height: 140px;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.courseList{
  margin-bottom: 20px;
}
// 学生评价
.student-evaluate {
  padding: 50px;
  background: #fff;
  box-shadow: 2px 2px 10px #efefef;
  margin-bottom: 30px;
}
.student-text {
  float: right;
  width: 88%;
  line-height: 28px;
  font-size: 14px;
  color: #999;
}
</style>

<script>
export default {
  data() {
    return {
      imgUrl1: require("../../assets/image/kecheng.png"),
      imgUrl2: require("../../assets/image/teacher/portrait.png"),
      currentDate: new Date(),
      id:'',
      natrue:'',
      teacherinfo:{},
      // 教师信息
      teacher:{},
      // 开设课程
      course:[]
    };
  },
  created(){
    this.id=this.$route.query.id
    this.natrue=this.$route.query.natrue    
    this.teacherDetail()
    //  console.log(this.id,this.natrue)
  },
  methods:{
    teacherDetail(){
      this.$axios.post('/teacher/dateils',{
        dns: "testwo.admin.longde999.cn",
        is_nature:this.natrue,
        teacher_id:this.id
      })
      .then(res => {
        // console.log(res)
        this.teacherinfo=res.data
        this.teacher=res.data.teacher
        this.course=res.data.course
        }
      )
    }
  }
};
</script>
